<template>
    <view class="cooperation">
        <uv-navbar
            title="合作伙伴"
            @leftClick="leftClick"
            bg-color="linear-gradient(to right, #D2F1DE 0%, #E3F6E8 50% ,#D2F1DE 100%)"
            :fixed="true"
        ></uv-navbar>
        <view class="cooperation-search">
            <view class="cooperation-top">
                <uv-search
                    @search="search"
                    @custom="search"
                    placeholder="请输入搜索内容"
                    v-model="keyword"
                ></uv-search>
            </view>
        </view>
        <view class="cooperation-swiper">
            <swiper
                class="swiper"
                circular
                :indicator-dots="true"
                :autoplay="true"
                :interval="3000"
                :indicator-active-color="'#ffffff'"
            >
                <swiper-item v-for="(item, index) in list1" :key="index">
                    <img
                        :src="BaseUrl + item.media"
                        mode="	scaleToFill"
                        style="
                            width: 100%;
                            height: 330rpx;
                            border-radius: 30rpx;
                        "
                        alt=""
                    />
                </swiper-item>
            </swiper>
        </view>

        <view class="tabs">
            <uv-tabs
                :list="list"
                @click="click"
                :scrollable="list.length > 4 ? true : false"
                :activeStyle="{ color: '#057748' }"
                :lineColor="'#057748'"
            ></uv-tabs>
        </view>
        <view class="cart">
            <view class="cart-item" v-for="i in shangjialist" :key="i" @click="Goshangjia(i)">
                <view class="cart-left">
                    <image
                        :src="BaseUrl + i.avatar"
                        style="width: 170rpx; height: 170rpx; border-radius: 30rpx"
                        mode="scaleToFill"
                    />
                </view>
                <view class="cart-right">
                    <view class="cart-right-tit">{{ i.shopname }}</view>
                    <view class="cart-right-text">
                        {{ i.address ? i.address : i.city }}
                    </view>
                </view>
            </view>
            <!-- <goods-list
                style="width: 100%"
                :goodsList="shangjialist"
            ></goods-list> -->
        </view>
    </view>
</template>

<script>
import { BaseUrl } from "../../../utils/req.js";
export default {
    data() {
        return {
            BaseUrl,
            keyword: "",
            current1: 0,

            list1: [],
            list: [],
            searchItem: {}, //搜素的
            shangjialist: [],
        };
    },
    onLoad() {
        this.fel();
        this.advertising();
    },
    methods: {
        // 搜索
        async search() {
            let id = this.searchItem.id ? this.searchItem.id : this.list[0].id;
            this.shangjget(id);
            // await this.$request
            //     .get("api/wanlshop.shop/lists", {
            //         search: this.keyword,
            //     })
            //     .then((res) => {
            //         console.log(res.data.data, "搜索1111111111111111111111111");
            //         this.shangjialist = res.data.data;
            //     });
        },
        leftClick() {
            uni.navigateBack();
        },
        // 店铺基地分类
        async fel() {
            await this.$request
                .get("api/wanlshop.shop_cate/lists", {})
                .then((res) => {
                    console.log(res.data.data, "店铺基地分类");
                    this.list = res.data;
                    this.shangjget(this.list[0].id);
                });
        },

        click(item) {
            console.log("item", item);
            this.searchItem = item;
            this.shangjialist = [];
            this.shangjget(item.id);
        },
        // 商家列表
        async shangjget(id) {
            await this.$request
                .get("api/wanlshop.shop/lists", {
                    wanlshop_shop_cate_id: id,
                    search: this.keyword,
                })
                .then((res) => {
                    console.log(res.data.data, "商家列表");
                    this.shangjialist = res.data.data;
                });
        },

        // 合作广告
        async advertising() {
            await this.$request
                .get("api/wanlshop.common/adverts", {
                    zhongcao: "合作伙伴",
                })
                .then((res) => {
                    this.list1 = res.data.data.partnerAdverts;
                });
        },
        // 跳转商家详情
        Goshangjia(i) {
            uni.navigateTo({
                url: "/liu/pages/detail?id=" + i.id,
            });
        },
    },
};
</script>

<style lang="scss" scoped>
/deep/.uv-search__content {
    background-color: #ffffff !important;
}

/deep/.uv-search__content__input {
    background-color: #ffffff !important;
}

/deep/.uv-search__action {
    background: linear-gradient(to right, #00a579, #057849);
    padding: 14rpx 30rpx;
    border-radius: 30rpx;
    margin-right: 4rpx;
    color: #fff !important;
    width: 140rpx !important;
}

// /deep/.uv-icon__icon {
// 	font-size: 0 !important;
// }

/deep/.uv-tabs__wrapper__nav__item {
    padding: 0 42rpx !important;
}

.cooperation {
    width: 100vw;

    background: linear-gradient(
        to bottom,
        #d3f1de 0%,
        #f4f6f5 30%,
        #f6f6f6 100%
    );

    .cooperation-search {
        width: 94vw;
        margin: 0rpx 3vw;
        padding-top: 190rpx;

        .cooperation-top {
            background-color: #fff;
            border-radius: 30rpx;
        }
    }

    .cooperation-swiper {
        width: 94vw;
        margin: 20rpx 3vw;
        height: 330rpx;

        .swiper {
            height: 330rpx;
            width: 100%;
        }
    }

    .tabs {
        margin: 0 20rpx;
    }

    .cart {
        width: 94vw;
        padding-top: 20rpx;
        margin: 0 3vw;

        .cart-item {
            width: 100%;
            height: 210rpx;
            background-color: #fff;
            border-radius: 30rpx;
            display: flex;
            align-items: center;
            margin-bottom: 20rpx;

            .cart-left {
                margin: 0 20rpx;
            }

            .cart-right {
                flex: 1;

                .cart-right-tit {
                    font-family: Source Han Sans CN;
                    font-weight: 400;
                    font-size: 30rpx;
                    color: #121212;
                    padding: 20rpx 0;
                    margin-bottom: 10rpx;
                    line-height: 1.2;
                }

                .cart-right-text {
                    font-family: Source Han Sans CN;
                    font-weight: 400;
                    font-size: 26rpx;
                    color: #666666;
                    line-height: 42rpx;
                }
            }
        }
    }
}
</style>
